<template>
  <div
    :class="['page-header', layout, pageWidth]"
    :style="`background: ${
      $route.path === '/dashboard' ? '#fff' : 'unset'
    }; margin-top: 50px`"
  >
    <div class="page-header-wide">
      <div class="breadcrumb" v-if="$route.path !== '/dashboard'">
        <a-breadcrumb>
          <a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
            <span>{{ item }}</span>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="detail">
        <div class="main">
          <div class="row">
            <!-- <h1
              v-if="showPageTitle && title && $route.path !== '/dashboard'"
              class="title"
            >
              {{ title }}
            </h1> -->
            <div class="action"><slot name="action"></slot></div>
          </div>
          <div class="row">
            <div v-if="this.$slots.content" class="content">
              <div v-if="avatar" class="avatar">
                <a-avatar
                  :size="50"
                  :style="{
                    backgroundColor: avatarColor[avatar.length],
                    verticalAlign: 'middle'
                  }"
                  >{{ avatar.slice(0, 1) }}</a-avatar
                >
              </div>
              <slot v-if="$route.path === '/dashboard'" name="content"></slot>
            </div>
            <div v-if="this.$slots.extra" class="extra">
              <slot name="extra"></slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PageHeader",
  props: {
    title: {
      type: [String, Boolean],
      required: false
    },
    breadcrumb: {
      type: Array,
      required: false
    },
    logo: {
      type: String,
      required: false
    },
    avatar: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      hide: false
    };
  },
  computed: {
    ...mapState("setting", [
      "layout",
      "showPageTitle",
      "pageWidth",
      "avatarColor"
    ])
  }
};
</script>

<style lang="less" scoped>
@import "index";
</style>
